<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <!-- <script src="ut/lib/canteen.js"></script> -->
    <link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
</style>


<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>
<div id="main7"></div>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                data: [
                    {
                        itemStyle: null,
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 40
                    },
                    {
                        itemStyle: null,
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 20
                    },
                    {
                        itemStyle: null,
                        name: 'ARRB2',
                        value: 30,
                        symbolSize: 20,
                    },
                    {
                        itemStyle: null,
                        name: 'CALM1',
                        value: 20,
                        symbolSize: 40
                    },
                    {
                        itemStyle: null,
                        name: 'CALM2',
                        value: 0,
                        symbolSize: 20
                    },
                    {
                        itemStyle: null,
                        name: 'FLNA',
                        value: 0,
                        symbolSize: 20
                    },
                    {
                        itemStyle: null,
                        name: 'NSF',
                        value: 0,
                        symbolSize: 20
                    }
                ],
                links: [
                    {
                        source: 'DRD2',
                        target: 'ADORA2A'
                    },
                    {
                        source: 'DRD2',
                        target: 'ARRB2'
                    },
                    {
                        source: 'DRD2',
                        target: 'CALM1'
                    },
                    {
                        source: 'DRD2',
                        target: 'CALM2'
                    },
                    {
                        source: 'DRD2',
                        target: 'FLNA'
                    },
                    {
                        source: 'DRD2',
                        target: 'NSF'
                    },
                    {
                        source: 'CALM1',
                        target: 'ADORA2A'
                    },
                    {
                        source: 'CALM1',
                        target: 'ARRB2'
                    },
                    {
                        source: 'CALM1',
                        target: 'CALM2'
                    },
                    {
                        source: 'CALM1',
                        target: 'FLNA'
                    },
                    {
                        source: 'CALM1',
                        target: 'NSF'
                    },
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main0', {
            option: option,
            title: 'has 0 value nodes'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                roam: true,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ARRB2',
                        value: 30,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'CALM1',
                        value: 20,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    }
                ],
                links: [
                    {
                        source: 'DRD2',
                        target: 'ADORA2A'
                    },
                    {
                        source: 'DRD2',
                        target: 'ARRB2'
                    }
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main1', {
            option: option,
            title: 'all the same'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ARRB2',
                        value: 30,
                        symbolSize: 50 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'CALM1',
                        value: 20,
                        symbolSize: 100 * Math.pow(2, 0.5)
                    }
                ],
                links: [
                    {
                        source: 'DRD2',
                        target: 'ADORA2A'
                    },
                    {
                        source: 'DRD2',
                        target: 'ARRB2'
                    }
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main2', {
            option: option,
            title: 'one symbol contains the center of the circular layout.'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ARRB2',
                        value: 30,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'CALM1',
                        value: 20,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    }
                ],
                links: [
                    {
                        source: 'DRD2',
                        target: 'ADORA2A'
                    },
                    {
                        source: 'DRD2',
                        target: 'ARRB2'
                    }
                ]
            }]
        };

        var chart = testHelper.create(echarts, 'main3', {
            option: option,
            title: 'overlapped'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 30 * Math.pow(2, 0.5)
                    }
                ],
            }]
        };

        var chart = testHelper.create(echarts, 'main4', {
            option: option,
            title: 'one node'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 30 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    }
                ],
            }]
        };

        var chart = testHelper.create(echarts, 'main5', {
            option: option,
            title: 'two nodes'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        option = {
            tooltip: {},
            legend: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                left: 50,
                width: 100,
                top: 50,
                height: 100,
                data: [
                    {
                        name: 'DRD2',
                        value: 40,
                        symbolSize: 70 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ADORA2A',
                        value: 0,
                        symbolSize: 10 * Math.pow(2, 0.5)
                    },
                    {
                        name: 'ARRB2',
                        value: 30,
                        symbolSize: 10 * Math.pow(2, 0.5)
                    }
                ],
            }]
        };

        var chart = testHelper.create(echarts, 'main6', {
            option: option,
            title: 'three nodes'
            // recordCanvas: true
        });
    });

</script>


<script>

    var option;

    require([
        'echarts'/*, 'map/js/china' */
    ], function (echarts) {

        var nodes = [];
        for (var i = 0; i < 50; i++) {
            nodes.push({
                name: 'node_' + i,
                value: 40,
                symbolSize: 7 + (i > 7 && i < 15 ? 40 : 0)
            });
        }

        option = {
            tooltip: {},
            series: [{
                type: 'graph',
                name: 'Gene',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                roam: true,
                focusNodeAdjacency: true,
                zoom: 0.5,
                label: {
                    show: true
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                itemStyle: {
                    opacity: 0.8
                },
                emphasis: {
                    label: {
                        color: 'blue'
                    },
                    lineStyle: {
                        width: 10
                    }
                },
                roam: true,
                data: nodes
            }]
        };

        var chart = testHelper.create(echarts, 'main7', {
            option: option,
            height: 400,
            title: [
                'scaled (symbol should not be overlapped)',
                'also check circular layout in **test/graph.html**',
                'where also has symbols scaled.'
            ]
        });
    });

</script>


</body>
</html>
